import React, { useEffect, useState } from 'react';
import '../../../scss/fp/jiageben.scss'
import { Input , Button} from 'antd';
import { UserAddOutlined } from '@ant-design/icons';
import { message  } from 'antd';

import Jiatable from "../../../components/fpfengzhuang/Jiatable";

import { get_jiageben , jiageben_deletedata} from "../../../tools/api";
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

function Jiageben(props) {

    const { Search } = Input;
    
    // 搜索打印输入框内的 value 值
    const onSearch = ( a ) => {
        console.log(a);
        axios.get(`http://localhost:4000/jiageben?shoppingname_like=${ a }`).then(
            response => { setJiage( response.data ) }
        )
    };

    var [ jiage , setJiage ] = useState()

    // 初始化渲染表格
    useEffect(() => {
       //-----🍌---🍌---🍌-----
       get_jiageben().then(
            response => {
                //  console.log( response.data ) 
                 setJiage(response.data)
                //  console.log(jiage);
            }
       )  
    },[])

       // 更新组件函数
       const upData = () => {
        //-----🍈---🍈---🍈-----
        get_jiageben().then(
            response => {
                //  console.log( response.data ) 
                 setJiage(response.data)
                 console.log(jiage);
            }
       )  
     }

     // 删除数据
     const shoppingcartClick = (record) => {
        //-----🍌---🍌---🍌-----
         // console.log(record.id);    
            jiageben_deletedata( record.id ).then(
                 response => {
                      console.log( response.data ) 
                      message.open({ type: 'success', content: '删除成功!' });
                      upData()
                 }
             )
     }

     var push = useNavigate()

     // 测试 跳转路由
     const goTrand = () => {
        //-----🍈---🍈---🍈-----
        push('/index/trand')
     }
    return (
        <div className='jiage'>
            <div className="bianjishopping_top">
                    <Search style={{width:300,marginRight:20}} placeholder="请输入商品名称" onSearch={onSearch}  />
                    <Button type="primary"><i><UserAddOutlined /></i> 添加</Button>
            </div>
            <div className="tabbbbb">


                <Jiatable 

                shoppingcartClick={ shoppingcartClick }

                goTrand={ goTrand }
                top1={ '商品编号' }
                top2={ '商品名称' }
                top3={ '品牌' }
                top4={ '分类' }
                top5={ '规格' }
                top6={ '单位' }
                top7={ '出售价格' }
                top8={ '进货价格' }
                
                index1={ 'shangpinbianhao' }
                index2={ 'shoppingname' }
                index3={ 'pinpai' }
                index4={ 'callect' }
                index5={ 'guige' }
                index6={ 'danwei' }
                index7={ 'chushoujiage' }
                index8={ 'jinhuojiage' }
                
                btn1={ '查看走势' }
                btn2={ '删除' }

                dataSource={ jiage }
                />


            </div>
        </div>
    );
}

export default Jiageben;